<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Class Selector</title>
        <style type="text/css">
            /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`odd`一词的元素 */
            /*[class~=odd] { */
            .odd{
                background-color: #dfdfdf;
            }

            /* 选择页面上显式书写了class属性(attribute)且该属性值中包含`even`一词的元素 */
            .even {
                background-color: #ffff00;
            }

            .yuan-fang {
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <h3>Class Selector</h3>

        <!-- 所有元素的 calss 属性值中都可以包含多个 class-name （它们之间使用空格隔开即可）-->
        <div id="first" class="odd afang yuan-fang di-pang lao-wang">第一个</div>
        <p id="second" class="even yuan-fang">老二</p>
        <div id="third" class="odd di-pang">小三</div>
        <section id="fourth" class="even lao-wang">老四</section>
        <div id="fifth" class="odd laowu">小五</div>
        <div class="even xiaoliu">小六汤包</div>
        <div id="seventh">每一天</div>

    </body>
</html>